<template>
  <div class="dashboard-container" ref="parentContainer">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content  line">
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-charts :option="lineOption"/>
          </dv-border-box-7>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content  bar">
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-charts :option="barOption"/>
          </dv-border-box-7>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <!--胶囊柱状图-->
        <div class="grid-content capsule">
          <h4 id="title">资源数量</h4>
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-capsule-chart :config="capsuleOption" style="width:90%;height:200px;margin-top: 30px;color: black"/>
          </dv-border-box-7>
        </div>
      </el-col>
      <el-col :span="8">
        <!--  动态环形图-->
        <div class="grid-content  pie">
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-charts :option="roseOption"/>
          </dv-border-box-7>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content  dashboard">
          <dv-border-box-7 :key="`${width}x${height}`">
            <dv-charts :option="dashboardOption"/>
          </dv-border-box-7>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {barChartsData} from "@/api/dashboader";

export default {
  name: 'Dashboard',
  data() {
    return {
      width: 0,
      height: 0,
      // 折线图
      lineOption: {
        title: {
          text: '入学人数趋势分析'
        },
        xAxis: {
          name: '月份',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        },
        yAxis: {
          name: '人数',
          data: 'value'
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'line'
          }
        ]
      },
      // 柱状图
      barOption: { },
      capsuleOption: {
        data: [
          {
            name: '视频',
            value: 167
          },
          {
            name: '文本',
            value: 67
          },
          {
            name: '压缩包',
            value: 123
          },
          {
            name: '图片',
            value: 55
          },
          {
            name: '其它',
            value: 98
          }
        ],
        showValue: true,
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
      },
      roseOption: {
        title: {
          text: '专业人数占比'
        },
        series: [
          {
            type: 'pie',
            data: [
              {name: 'python大数据', value: 93},
              {name: 'Web前端', value: 32},
              {name: '鸿蒙开发', value: 65},
              {name: 'UI设计', value: 44},
              {name: '运维', value: 52},
            ],
            insideLabel: {
              show: true
            },
            roseType: true
          }
        ]
      },
      dashboardOption: {
        title: {
          text: '出勤率'
        },
        series: [
          {
            type: 'gauge',
            data: [
              {name: 'itemA', value: 55, gradient: ['#e7bcf3', '#e690d1', '#fb7293']}
            ],
            axisLabel: {
              formatter: '{value}%'
            },
            animationCurve: 'easeOutBounce'
          }
        ]
      }
    }
  },
  methods: {},
  mounted() {
    // 部门人数  异步请求  user model   dept_id    [{'市场部',20},{"研发部":10}]   [市场部,研发部] [20,10]
    barChartsData().then(response => {
      let barData = response.bar_data
      const deptNames = []
      const numbers = []
      barData.forEach(item => {
        deptNames.push(item['name'])
        numbers.push(item['value'])
      })
      this.barOption = {
        title: {
          text: '部门人数'
        },
        xAxis: {
          name: '部门',
          data: deptNames
        },
        yAxis: {
          name: '人数',
          data: 'value',
          min:0
        },
        series: [
          {
            data: numbers,
            type: 'bar',
            gradient: {
              color: ['#37a2da', '#67e0e3']
            }
          }
        ]
      }
    })
    // :key="`${width}x${height}`"
    new ResizeObserver(entries => {
      const rect = entries[0].contentRect;
      this.width = Math.floor(rect.width);
      this.height = Math.floor(rect.height);
    }).observe(this.$refs.parentContainer);

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 20px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.line, .bar {
  height: 45vh;
  box-shadow: 0 5px 15px #ccc;
}

.pie, .dashboard, .capsule {
  height: 38vh;
  box-shadow: 0 5px 15px #ccc;
}

#title {
  position: absolute;
  top: -5px;
  left: 13%;
}
</style>
